<template>
	<view class="content">
		<view class="top">
			<view class="left">
				<textarea v-model="topicText" :focus="focus" @focus="onFocus" @blur="onBlur" @input="setText" />
				<view class="bottom">
					<view @tap="openWindow(1)">
						<text>#</text>
						话题
					</view>
					<view @tap="openWindow(2)">
						<text>@</text>
						好友
					</view>
				</view>
			</view>
			<view class="right" @tap="chooseImage">
				<!-- <image :src="url"></image> -->
				<view class="right_img" v-if="url" :style="{backgroundImage:'url('+url+')'}"></view>
				<i v-if="!url" class="iconfont iconfengmian"></i>
				<view v-if="!url" class="right-text">选择封面</view>
			</view>
		</view>
		<view class="add">
			<view class="title">添加视频</view>
			<view class="video">
				<view v-if="Vurl">
					<video :src="Vurl" controls v-show="videoShow"></video>
					<i class="iconfont iconjujue" @tap.stop="clearVurl"></i>
				</view>
				<view v-else @tap="chooseVideo">
					<view class="noneVideo"></view>
					<i class="iconfont iconjiashipin"></i>
					<view class="right-text">选择视频</view>
				</view>
			</view>
		</view>
		<view class="add">
			<view class="title">
				<view><i class="iconfont1 iconweizhi-xian"></i>添加位置</view>
				<!-- <view @tap="openWindow(3)"><i class="iconfont icon-fanhui"></i></view> -->
				<view @tap="chooseLocation"><i class="iconfont icon-fanhui"></i></view>
			</view>
			<view class="area" v-if="location">
				<scroll-view class="nav" scroll-x="true">
					<view class="nav_box">
						<block v-for="(item, index) in location" :key="index">
							<view class="nav_item" @tap="navClick(index)" :class="[areaIndex == index ? 'nav_active' : '']">{{ item.name }}</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 发布范围 -->
		<view class="set">
			<view class="set_title"><i class="iconfont1 iconquanxian"></i>发布范围</view>
			<scroll-view scroll-y="true" class="setScroll">
				<radio-group @change="radioChange($event,0)" class="selectRadioList">
					<label v-for="(item,index) in schoolList" :key="index">
						<radio :value="item.id" color="#FF9900" :checked="item.id == schoolId"/>
						<text :class="item.id == schoolId ? 'active': ''">{{item.nickname}}</text>
					</label>
				</radio-group>
			</scroll-view>
		</view>
		<!-- 发布范围 -->
<!-- 		<view class="set">
			<view class="set_title">
				<view>
					<i class="iconfont1 iconquanxian"></i>
						观看对象
				</view>
			</view>
			<radio-group @change="radioChange($event,1)" class="selectRadioList">
				<label v-for="(item,index) in powerList" :key="index">
					<radio  :value="item.value"  color="#FF9900" :checked="index == powerIndex"/>
					<text :class="index == powerIndex ? 'active': ''">{{item.name}}</text>
				</label>
			</radio-group>
		</view> -->
		<!-- 底部 -->
		<view class="setBottom">
			<view class="save1">
				<i class="iconfont1 iconcaogao"></i>
				<view>存草稿</view>
			</view>
			<view class="save2">
				<i class="iconfont1 iconcunbendi"></i>
				<view>存本地</view>
			</view>
			<view class="release" @tap="finish">发布</view>
		</view>
		<!-- 选择话题 -->
		<my-topic v-if="isChangeTopic" :setheight="height" @setTopicText="setTopicText"></my-topic>
		<!-- 选择好友 -->
		<my-friend v-if="isChangeFriend" @closeAll="closeAll" @setFriend="setFriend"></my-friend>
		<!-- 选择位置 -->
		<my-area v-if="isChangeArea" @closeAll="closeAll"></my-area>
	</view>
</template>

<script>
import myArea from './components/changeArea.vue';
import myTopic from './components/changeTopic.vue';
import myFriend from './components/changeFriend.vue';
import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
import cityData from '@/components/mpvue-citypicker/city-data/city.js';
var _this = '';
export default {
	components: {
		myArea,
		myTopic,
		myFriend
	},
	data() {
		_this = this;
		return {
			focus: false,
			powerList: [{ value: 1, name: '全部' }, { value: 2, name: '老师' }, { value: 3, name: '学生' },{ value: 4, name: '家长' },{ value: 5, name: '仅自己可见' }],
			powerIndex: 0,
			isChangeTopic: false,
			isChangeArea: false,
			isChangeFriend: false,
			height: 0,
			topicText: '', //话题内容
			url: '',
			Vurl: '',
			topic_name: '',
			str: '',
			location: [],
			areaIndex: 0,
			sign:'',
			schoolList: [],
			schoolId: 0,
			watchIndex: 0,
			student_id: uni.getStorageSync('currentChild').student_id,
			videoShow: true
		};
	},
	onLoad() {
		var k_token = uni.getStorageSync('token');
		this.$zapi.apiPost('user/App/getsign').then(res=>{
			if(res.data.code==200){
				this.sign=res.data.data.sign;
			}
		});
		this.getSchoolList()
	},
	methods: {
		// 获取学校列表
		getSchoolList() {
			this.$zapi.apiPost('user/App/userschoolList',{student_id: this.student_id}).then(res => {
				if (res.data.code == 200) {
					this.schoolList = res.data.data
					this.schoolId = res.data.data[0].id
				}
			})
		},
		/* 发布视频 */
		finish() {
			var data = {
				title: this.topicText,
				img_url: this.url,
				video_url: this.Vurl,
				// category_type: this.powerList[this.powerIndex].value,
				sign:this.sign,
				school_id: this.schoolId //学校或机构或私塾id(1,2,3)
			};
			if (this.topic_name) {
				data.topic_name = this.topic_name;
			}
			if (this.location.length > 0) {
				var longitude = this.location[this.areaIndex].longitude;
				var latitude = this.location[this.areaIndex].latitude;
				data.coordinate = longitude + ',' + latitude;
				data.province_name = this.location[this.areaIndex].province_name;
				data.city_name = this.location[this.areaIndex].city_name;
				data.area_name = this.location[this.areaIndex].name;
			}
			if (!data.title) {
				uni.showToast({
					title: '请填写视频标题',
					icon: 'none'
				});
			} else if (!data.img_url) {
				uni.showToast({
					title: '请选择视频封面',
					icon: 'none'
				});
			} else if (!data.video_url) {
				uni.showToast({
					title: '请选择视频',
					icon: 'none'
				});
			} else {
				this.$zapi.apiPost('user/video.Lists/VideoAdd', data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					if (res.data.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				});
			}
		},
		/* 文本框获取焦点 */
		onFocus(e) {
			this.height = e.detail.height;
		},
		/* 文本框失去焦点 */
		onBlur() {
			this.isChangeTopic = false;
			this.focus = false;
		},
		setText(e) {
			this.topicText = e.target.value;
			var str = e.target.value;
			this.str = str.substr(str.length - 1, 1);
			if (this.str === '#') {
				this.isChangeTopic = true;
			}
			if (this.str === '@') {
				this.isChangeFriend = true;
			}
		},
		/* 给选中的话题设置样式 */
		setTopicText(e) {
			this.isChangeTopic = false;
			this.focus = false;
			var txt = this.topicText.substr(this.topicText.length - 1, 1);
			if (txt == '#') {
				this.topicText += e.topic_name;
			} else {
				var val = '#' + e.topic_name;
				this.topicText += val;
			}
			this.topic_name = e.topic_name;
		},
		/* 给选中的朋友设置样式 */
		setFriend(e) {
			this.isChangeFriend = false;
			if (this.str == '@') {
				this.topicText += e.nicheng;
			} else {
				var val = '@' + e.nicheng;
				this.topicText += val;
			}
		},
		/* 设置权限选择 */
		radioChange(e,type) {
			// 0 发布范围 1 观看对象
			if (type == 0) {
				this.schoolId = e.detail.value
			} else {
				this.watchIndex = e.detail.value
			}
		},
		/* 打开弹窗*/
		openWindow(type) {
			switch (type) {
				case 1:
					this.focus = true;
					this.isChangeTopic = !this.isChangeTopic;
					break;
				case 2:
					this.isChangeFriend = !this.isChangeFriend;
					break;
				case 3:
					this.isChangeArea = !this.isChangeArea;
					break;
			}
		},
		/* 关闭弹窗 */
		closeAll() {
			this.isChangeFriend = false;
			this.isChangeArea = false;
		},
		/* 选择封面图片 */
		chooseImage: function() {
			var _this = this;
			uni.chooseImage({
				count: 1,
				success: function(res) {
					uni.showLoading({
						title: '上传中',
						mask: true
					});
					_this.$zapi.apifile('user/currency.basic/UploadUserImg',{file:res.tempFilePaths[0]}).then(res=>{
						var result = JSON.parse(res.data);
						if(result.code == 200) {
							_this.url = result.data.visit_path;
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
						uni.hideLoading();
					})
					// 	// url: 'http://ccc.25002.cn/index.php/user/currency.basic/UploadUserImg',
				}
			});
		},
		/* 选择视频 */
		chooseVideo: function() {
			var _this = this;
			uni.chooseVideo({
				success: res => {
					uni.showLoading({
						title: '上传中',
						mask:true
					});
					_this.$uapi.apifile('api/v1/upload',{file:res.tempFilePath}).then(res => {
						var result = JSON.parse(res.data);
						if(result.code == 200) {
							_this.Vurl = result.data.fileUrl;
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
						uni.hideLoading();
					})
				}
			});
		},
		/* 清理视频 */
		clearVurl() {
			this.Vurl = '';
		},
		/* 选择地址 */
		chooseLocation: function() {
			var _this = this;
			/* https: //apis.map.qq.com/ws/geocoder/v1/?location=22.25409,113.586457&key=225BZ-7QO34-BZOUQ-DU247-YIGX7-IZF3M&output=json */
			uni.chooseLocation({
				success: res => {
					var area = res;
					var data = {
						key: '225BZ-7QO34-BZOUQ-DU247-YIGX7-IZF3M',
						get_poi: 0
					};
					var url = 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + ',' + res.longitude;
					data.output = 'json';
					uni.request({
						type: 'get',
						dataType: 'jsonp',
						data: data,
						jsonp: 'callback',
						jsonpCallback: 'QQmap',
						url: url,
						success: function(json) {
							var toStr = JSON.stringify(json);
							var vstr = JSON.parse(json['data']);
							area.province_name = vstr.result.address_component.province;
							area.city_name = vstr.result.address_component.city;
							_this.location.unshift(area);
						},
						error: function(err) {
							uni.showToast({
								title: '服务端错误，请刷新浏览器后重试',
								icon: 'none'
							})
						}
					});
				}
			});
		},
		navClick(index) {
			this.areaIndex = index;
		}
	},
	watch: {
		isChangeTopic(newVal) {
			if (newVal == false) {
				this.videoShow = true;
			} else {
				this.videoShow = false;
			}
	    },
		isChangeFriend(newVal) {
			if (newVal == false) {
				this.videoShow = true;
			} else {
				this.videoShow = false;
			}
		},
		isChangeArea(newVal) {
			if (newVal == false) {
				this.videoShow = true;
			} else {
				this.videoShow = false;
			}
		}
	}
};
</script>

<style>
page {
	background: #f7f7f7;
	width: 690upx;
	margin: auto;
}
.content {
	width: 100%;
	margin-bottom: 50upx;
}
.top {
	height: 300upx;
	background: #ffffff;
	opacity: 1;
	border-radius: 20upx;
	display: flex;
	justify-content: space-between;
	margin: 30upx 0 20upx;
}
.top .left {
	padding: 30upx;
	width: 400upx;
	height: 200upx;
}
textarea {
	width: 100%;
	height: 100%;
}
.top .right {
	width: 220upx;
	height: 100%;
	text-align: center;
}
.right{
	border: 1px solid #ccc;
	border-radius: 20upx;
}
.right_img{
	border-radius: 20upx;	
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding-bottom: 300upx; /* 关键就在这里 */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}
/* .right image {
	width: 220upx;
	height: 100%;
	border: 1upx solid #cccccc;
	border-radius: 20upx;
} */
.iconfengmian {
	color: #e5e5e5;
	font-size: 180upx;
	/* position: absolute; */
	/* top: 50upx; */
	line-height: 1;
	/* right: 50upx; */
}
.right-text {
	color: #cccccc;
	font-size: 24upx;
	/* margin-top: -120upx; */
}
.top .bottom {
	display: flex;
	justify-content: flex-start;
}
.top .bottom view {
	color: #666666;
	font-size: 30upx;
	margin-right: 40upx;
}
.top .bottom text {
	color: #FF9900;
	font-size: 30upx;
}
/* 添加位置 */
.add {
	background: #ffffff;
	opacity: 1;
	border-radius: 20upx;
	margin-bottom: 20upx;
	padding: 30upx;
}

.add .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 34upx;
	color: #666666;
	margin-bottom: 30upx;
}
video {
	height: 300upx;
	max-width: 600upx !important;
	position: absolute;
	left: 60upx;
	top: 460upx;
}
.video {
	text-align: center;
	height: 300upx;
}
.iconjujue {
	color: #ff5a3e;
	position: absolute;
	margin-top: -40upx;
	left: 86.8%;
	font-size: 40rpx;
	width: 40rpx;
}
.noneVideo {
	height: 300upx;
	max-width: 690upx;
	background: #fafafa;
	border: 1upx solid #cccccc;
}
.iconjiashipin {
	font-size: 160upx;
	color: #cccccc;
	position: relative;
	top: -260upx;
	line-height: 1;
}
.video .right-text {
	margin-top: 0;
	position: relative;
	top: -270upx;
}
.add .title view:first-child {
	color: #666666;
	font-size: 34upx;
	display: flex;
	align-items: center;
}
.add .title i {
	color: #cccccc;
}
.add .title .iconweizhi-xian {
	color: #999999;
	font-size: 40upx;
	margin-right: 10upx;
}
.area {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.nav {
	width: 100%;
	color: #999999;
}
.nav_box {
	display: flex;
	white-space: nowrap;
}
.nav_item {
	display: flex;
	line-height: 1;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 30upx;
	border: 1upx solid #999999;
	padding: 10upx 12upx;
	margin-right: 10upx;
	border-radius: 8upx;
}

.nav_active {
	color: #ffffff;
	background: #FF9900;
	border-color: #FF9900;
}
/* 设置权限 */
.set {
	min-height: 120upx;
	padding: 30upx;
	background: #ffffff;
	border-radius: 20upx;
	margin-bottom: 20upx;
	display: flex;
	align-items: flex-start;
}
.set .active {
	color: #333333;
}
.set_title {
	color: #666666;
	font-size: 34upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1;
	margin-bottom: 30upx;
	width: 30%;
	white-space: nowrap;
}
.set_title i {
	font-size: 40upx;
	line-height: 1;
	margin-right: 10upx;
}
radio-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
radio {
	transform: scale(0.8);
}
.iconbangzhuzhongxin {
	color: #ffb800;
}
/* 底部 */
.setBottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 690upx;
}
.save1,
.save2 {
	text-align: center;
	color: #666666;
	font-size: 30upx;
}
.save1 i {
	color: #666666;
	font-size: 50upx;
}
.save2 i {
	color: #FF9900;
	font-size: 50upx;
}
.release {
	width: 440upx;
	height: 80upx;
	line-height: 80upx;
	background: #FF9900;
	color: #ffffff;
	font-size: 34upx;
	border-radius: 40upx;
	text-align: center;
}
.selectRadioList {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.selectRadioList label {
	color: #999999;
	margin-bottom: 10upx;
}
.setScroll {
	max-height: 400upx;
	margin-left: 30upx;
	width: 70%;
}
</style>
